<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>资源服务</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="./css/base.css">
</head>

<body>
    <!-- 首页 HTML 代码 -->
    <header>
        <div class="flex_bgc flex-between-center">
            <div id="header-Logo">
                <p>湖南省科技金融服务</p>
                <p>中心线上平台</p>
            </div>
            <ul class="layui-nav" style="background-color: #001A4D;">
                <li class="layui-nav-item"><a href="./index.html">首页</a></li>
                <li class="layui-nav-item"><a href="./financingServices.html">融资服务</a></li>
                <li class="layui-nav-item"><a href="./financialProducts.html">金融产品</a></li>
                <li class="layui-nav-item"><a href="./financialInstitution.html">金融机构</a></li>
                <li class="layui-nav-item"><a href="./innovation.html">科技创新板块</a></li>
                <li class="layui-nav-item"><a href="./technologyService.html">科技服务</a></li>
                <li class="layui-nav-item"><a href="./policyGuidelines.html">政策指南</a></li>
                <li class="layui-nav-item"><a href="./innovationInformation.html">创新咨询</a></li>
                <li class="layui-nav-item layui-this"><a href="javaScript:;">资源服务</a></li>
                <li class="layui-nav-item"><a href="./aboutUs.html">关于我们</a></li>
            </ul>
        </div>
    </header>
    <main>
        <div class="main-top">
            <h1 style="font-size: 30px;">资源服务</h1>
            <div class="flex-center-center" style="margin-top: 40px;">
                <div class="inputWidth"><input type="text" class="baseInput"></div>
                <button type="button" class="layui-btn layui-btn-normal">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
            </div>
        </div>
        <div class="main-padding">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">众创空间</li>
                    <li>孵化器</li>
                    <li>科技园区</li>
                    <li>高校院所</li>
                    <li>创新平台</li>
                    <li>服务机构</li>
                    <li>专家人才</li>
                    <li>金融活动</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <table id="tableData1"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table id="tableData2" lay-filter="test"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table id="tableData3" lay-filter="test"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table id="tableData4" lay-filter="test"></table>
                    </div>
                    <div class="layui-tab-item">
                        <table id="tableData5" lay-filter="test"></table>
                    </div>
                    <div class="layui-tab-item">

                    </div>
                    <div class="layui-tab-item">

                    </div>
                    <div class="layui-tab-item">
                        <div class="flex-between-center">
                            <div class="finance-box" onclick="detailClick()">
                                <div class="flex-between-center">
                                    <div class="finance-box_left">
                                        <img src="./image/home/btnBGD.png" style="width: 100%;height: 130px;">
                                    </div>
                                    <div class="finance-box_right">
                                        <h4>关于举办“2021检验检测产业链数字化创新 发展”高峰论坛的通知</h4>
                                        <p>主办机构：上海实验室装备协会</p>
                                        <p>2021年6月26日（星期六），09:00开始</p>
                                        <p>上海市闵行区都会路3799号上海闵行星河湾酒店</p>
                                    </div>
                                </div>
                                <div class="flex-flexEnd" style="margin-top: 10px;">
                                    <button type="button" class="layui-btn-primary layui-border-blue"
                                        style="width: 25%;padding: 10px 0;">查看详情</button>
                                </div>
                            </div>
                            <div class="finance-box" onclick="detailClick()">
                                <div class="flex-between-center">
                                    <div class="finance-box_left">
                                        <img src="./image/home/btnBGD.png" style="width: 100%;height: 130px;">
                                    </div>
                                    <div class="finance-box_right">
                                        <h4>关于举办“2021检验检测产业链数字化创新 发展”高峰论坛的通知</h4>
                                        <p>主办机构：上海实验室装备协会</p>
                                        <p>2021年6月26日（星期六），09:00开始</p>
                                        <p>上海市闵行区都会路3799号上海闵行星河湾酒店</p>
                                    </div>
                                </div>
                                <div class="flex-flexEnd" style="margin-top: 10px;">
                                    <button type="button" class="layui-btn-primary layui-border-blue"
                                        style="width: 25%;padding: 10px 0;">查看详情</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-flexEnd paging">
                <div id="pageDom"></div>
            </div>
        </div>
    </main>
    <footer class="footerStyle"></footer>
</body>
<script src="./js/jquery.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/include.js"></script>
<script>
    //触发
    footerStyle();
    layuiClick();

    //方法
    function layuiClick() {
        let table = layui.table;
        //数据表
        layui.use('table', function () {
            //众创空间
            table.render({
                elem: '#tableData1',
                height: 312,
                url: '../../demo/table/user/-page=1&limit=30.js', //数据接口
                page: true, //开启分页
                cols: [[ //表头
                    { field: 'id', title: '序号', width: 100, sort: true, fixed: 'left', align: 'center' },
                    { field: 'username', title: '众创空间名称', align: 'center' },
                    { field: 'sex', title: '运营主体', align: 'center' },
                    { field: 'city', title: '地区', align: 'center' },
                    { field: 'sign', title: '联系方式', align: 'center' }
                ]]
            });
        });

        layui.use('table', function () {
            //孵化器
            table.render({
                elem: '#tableData2',
                height: 312,
                url: '../../demo/table/user/-page=1&limit=30.js', //数据接口
                page: true, //开启分页
                cols: [[ //表头
                    { field: 'id', title: '序号', width: 100, sort: true, fixed: 'left', align: 'center' },
                    { field: 'username', title: '孵化器名称', align: 'center' },
                    { field: 'city', title: '地区', align: 'center' },
                    { field: 'sign', title: '级别', align: 'center' }
                ]]
            });
        });

        layui.use('table', function () {
            //科技园区
            table.render({
                elem: '#tableData3',
                height: 312,
                url: '../../demo/table/user/-page=1&limit=30.js', //数据接口
                page: true, //开启分页
                cols: [[ //表头
                    { field: 'id', title: '序号', width: 100, sort: true, fixed: 'left', align: 'center' },
                    { field: 'username', title: '单位名称', align: 'center' },
                    { field: 'sex', title: '地区', align: 'center' },
                    { field: 'city', title: '地址', align: 'center' },
                    { field: 'sign', title: '联系方式', align: 'center' }
                ]]
            });
        });

        layui.use('table', function () {
            //高校院所
            table.render({
                elem: '#tableData4',
                height: 312,
                url: '../../demo/table/user/-page=1&limit=30.js', //数据接口
                page: true, //开启分页
                cols: [[ //表头
                    { field: 'id', title: '序号', width: 100, sort: true, fixed: 'left', align: 'center' },
                    { field: 'username', title: '高校名称', align: 'center' },
                    { field: 'sex', title: '地区', align: 'center' },
                    { field: 'city', title: '地址', align: 'center' },
                    { field: 'sign', title: '联系方式', align: 'center' }
                ]]
            });
        });

        layui.use('table', function () {
            //创新平台
            table.render({
                elem: '#tableData5',
                height: 312,
                url: '../../demo/table/user/-page=1&limit=30.js', //数据接口
                page: true, //开启分页
                cols: [[ //表头
                    { field: 'id', title: '序号', width: 100, sort: true, fixed: 'left', align: 'center' },
                    { field: 'username', title: '名称', align: 'center' },
                    { field: 'sex', title: '依托单位', align: 'center' },
                    { field: 'city', title: '技术领域', align: 'center' },
                    { field: 'sign', title: '地区', align: 'center' }
                ]]
            });
        });

        //分页
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'pageDom',
                limit: 6, //每页几条数据
                count: 70, //数据总数，从服务端得到
                limits: [6, 12, 18],  //每页条数的选择项
                layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if (!first) {
                        layer.msg('第' + obj.curr + '页', { offset: 'b' });
                    }
                }
            });
        });

    }
    function detailClick() {
        location.href='./components/resourceServicesDetail.html'
    }
</script>
<style scoped>
    /* 内容标题头部 */
    .main-padding {
        margin: 20px 12%;
        padding: 20px 20px 0;
        background-color: #fff;
    }

    .main-top {
        text-align: center;
        margin: 80px 0;
    }

    .main-tab {
        padding: 10px 0;
    }

    .main-tab ul {
        display: flex;
    }

    .main-tab ul li {
        margin: 0 20px;
    }

    .main-box {
        padding: 0 10px;
    }

    .main-box div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px #f0f2f5 solid;
        line-height: 60px;
    }

    .main-box p {
        font-size: 16px;
    }

    .main-box span {
        font-size: 16px;
        color: #aaaaaa;
    }

    /* 金融活动 */
    .finance-box {
        box-shadow: #aaaaaa 0 0 4px;
        padding: 10px;
        margin: 10px;
        width: 49%;
    }

    .finance-box_left {
        width: 30%;
    }

    .finance-box_right {
        width: 68%;
    }

    .finance-box_right h4 {
        font-size: 18px;
        font-weight: 600;
        line-height: 27px;
    }

    .finance-box_right p {
        font-size: 15px;
        color: #aaaaaa;
        line-height: 27px;
    }
</style>

</html>